<template>
  <el-card>
    <el-button type="primary" @click="createAssociativeLine" style="margin-bottom: 10px;">
      创建关联线
    </el-button>
    <div ref="mindMapContainerRef" class="mindMapContainer"></div>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import MindMap from 'simple-mind-map'
import MiniMap from 'simple-mind-map/src/plugins/MiniMap.js'
import Watermark from 'simple-mind-map/src/plugins/Watermark.js'
import KeyboardNavigation from 'simple-mind-map/src/plugins/KeyboardNavigation.js'
import ExportPDF from 'simple-mind-map/src/plugins/ExportPDF.js'
import ExportXMind from 'simple-mind-map/src/plugins/ExportXMind.js'
import Export from 'simple-mind-map/src/plugins/Export.js'
import Drag from 'simple-mind-map/src/plugins/Drag.js'
import Select from 'simple-mind-map/src/plugins/Select.js'
import RichText from 'simple-mind-map/src/plugins/RichText.js'
import AssociativeLine from 'simple-mind-map/src/plugins/AssociativeLine.js'
import TouchEvent from 'simple-mind-map/src/plugins/TouchEvent.js'
import NodeImgAdjust from 'simple-mind-map/src/plugins/NodeImgAdjust.js'
import SearchPlugin from 'simple-mind-map/src/plugins/Search.js'
import Painter from 'simple-mind-map/src/plugins/Painter.js'
import ScrollbarPlugin from 'simple-mind-map/src/plugins/Scrollbar.js'
import Formula from 'simple-mind-map/src/plugins/Formula.js'
import Cooperate from 'simple-mind-map/src/plugins/Cooperate.js'

// 注册插件
MindMap.usePlugin(MiniMap)
  .usePlugin(Watermark)
  .usePlugin(Drag)
  .usePlugin(KeyboardNavigation)
  .usePlugin(ExportPDF)
  .usePlugin(ExportXMind)
  .usePlugin(Export)
  .usePlugin(Select)
  .usePlugin(AssociativeLine)
  .usePlugin(NodeImgAdjust)
  .usePlugin(TouchEvent)
  .usePlugin(SearchPlugin)
  .usePlugin(Painter)
  .usePlugin(ScrollbarPlugin)
  .usePlugin(Formula)
  .usePlugin(Cooperate)

const mindMapContainerRef = ref()
let mindMap = null

const mindData = {
  data: {
    text: '根节点'
  },
  children: [
    {
      data: {
        text: '子节点1'
      },
      children: []
    },
    {
      data: {
        text: '子节点2'
      },
      children: []
    }
  ]
}

onMounted(() => {
  mindMap = new MindMap({
    el: mindMapContainerRef.value,
    data: mindData
  })
  mindMap.on('data_change', () => {
    const data = mindMap.getData();
    // const associativeLines = mindMap.associativeLines;
    console.log('最新mindData:', data);
    console.log('data_change lines:', mindMap.associativeLine?.lines);
    // console.log('最新associativeLines:', associativeLines);
  });
})

function createAssociativeLine() {
  if (mindMap) {
    console.log('associativeLine:', mindMap.associativeLine);
    console.log('activeNode:', mindMap.renderer.activeNode);
    mindMap.associativeLine.createLineFromActiveNode({
      line: {
        stroke: 'url(#assoc-gradient)', // 使用渐变色
        lineWidth: 1.5,                // 更细腻
        dasharray: [],                 // 实线
        shadowColor: 'rgba(64,158,255,0.2)', // 阴影
        shadowBlur: 6
      },
      arrow: {
        show: true,
        stroke: '#409EFF',
        fill: '#409EFF',
        width: 4,   // 更小巧
        height: 4  // 更小巧
      }
    })
    setTimeout(() => {
      console.log('lines after create:', mindMap.associativeLine?.lines);
    }, 100); // 延迟一点，确保数据已更新
    // 动态插入渐变色定义到SVG
    setTimeout(() => {
      const svg = mindMap.mindMapSvg;
      if (svg && !svg.querySelector('#assoc-gradient')) {
        const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
        const linearGradient = document.createElementNS('http://www.w3.org/2000/svg', 'linearGradient');
        linearGradient.setAttribute('id', 'assoc-gradient');
        linearGradient.setAttribute('x1', '0%');
        linearGradient.setAttribute('y1', '0%');
        linearGradient.setAttribute('x2', '100%');
        linearGradient.setAttribute('y2', '0%');
        const stop1 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
        stop1.setAttribute('offset', '0%');
        stop1.setAttribute('stop-color', '#409EFF');
        stop1.setAttribute('stop-opacity', '0.7');
        const stop2 = document.createElementNS('http://www.w3.org/2000/svg', 'stop');
        stop2.setAttribute('offset', '100%');
        stop2.setAttribute('stop-color', '#67C23A');
        stop2.setAttribute('stop-opacity', '0.7');
        linearGradient.appendChild(stop1);
        linearGradient.appendChild(stop2);
        defs.appendChild(linearGradient);
        svg.insertBefore(defs, svg.firstChild);
      }
    }, 0);
  }
}
</script>

<style>
.mindMapContainer {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 500px;
  background: #fff;
}
</style>